<template>
  <div v-show="$route.name == 'show-save'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/show-list' }">展厅列表
    </el-breadcrumb-item>
      <el-breadcrumb-item>添加订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form :model="saveForm" :rules="saveFormRules" ref="saveForm" label-width="110px" class="demo-saveForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="日期" prop="date">
              <el-date-picker type="date" placeholder="选择日期" v-model="saveForm.date" value-format='yyyy-MM-dd' :disabled="oid ? true : false">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customer">
              <el-select v-model="saveForm.customer" placeholder="请选择名称" clearable popper-class="dropdownbox" filterable :disabled="oid ? true : false">
                <el-option v-for="element in customerList"
                  :label="element.company"
                  :value="element.company">
                  <span style="float: left">{{ element.company }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="width:90%" label="客户地址" prop="address">
              <el-input v-model="saveForm.address" :disabled="oid ? true : false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="新旧" prop="new">
              <el-radio-group v-model="saveForm.new" @change="changeNew">
                <el-radio :label="1">全新</el-radio>
                <el-radio :label="0">旧品</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人" prop="cname">
              <el-input v-model="saveForm.cname" :disabled="oid ? true : false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="saveForm.phone" :disabled="oid ? true : false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="类型" prop="product">
              <el-radio-group v-model="saveForm.product" @change="changeProduct">
                <el-radio label="会议屏">会议屏</el-radio>
                <el-radio label="其他">其他</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="productn">
              <el-select v-model="saveForm.productn" placeholder="请选择名称" clearable popper-class="dropdownbox" @change="changeName()">
                <el-option v-for="house in houseList"
                  :key="house"
                  :label="house"
                  :value="house">
                  <span style="float: left">{{ house }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格" prop="model">
              <el-select v-model="saveForm.model" placeholder="请选择规格" clearable popper-class="dropdownbox" @change="changeModel()">
                <el-option v-for="model in modelList"
                  :key="model.id"
                  :label="model.model"
                  :value="model.id">
                  <span style="float: left">{{ model.model }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库库存">
              <el-input v-model="amoumt" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位">
              <el-input v-model="unit" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="this.role != 2">
            <el-form-item label="成本">
              <el-input-number v-model="nowcost" controls-position="right" :precision="2" :step="1" disabled></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数量" prop="amoumt">
              <el-input-number v-model="saveForm.amoumt" controls-position="right" :precision="0" :step="1" :min="0" :max="amoumt"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="展览类型" prop="state">
              <el-radio-group v-model="saveForm.state">
                <el-radio :label="0">体验机</el-radio>
                <el-radio :label="1">样品机</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="states">
              <el-radio-group v-model="saveForm.states">
                <el-radio :label="1">在展</el-radio>
                <el-radio :label="3">待定</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="安装日期" prop="installtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="saveForm.installtime" value-format='yyyy-MM-dd' :disabled="oid ? true : false"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装时间" prop="itime">
              <el-time-picker
                v-model="saveForm.itime"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                :disabled="oid ? true : false"
                placeholder="任意时间点"
                value-format='HH:mm:ss'>
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="other">
              <el-input v-model="saveForm.other"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="submitForm()">确定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      oid: '',
      role: '',
      saveForm: {
        date: '',
        customer: '',
        address: '',
        cname: '',
        phone: '',
        new: 1,
        state: 0,
        product: '会议屏',
        productn: '',
        model: '',
        amoumt: 0,
        states: 1,
        installtime: '',
        itime: '',
        other: ''
      },
      saveFormRules: {
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        customer: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入客户地址', trigger: 'blur' }],
        cname: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        product: [{ required: true, message: '请选择类别', trigger: 'change' }],
        productn: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        model: [{ required: true, message: '请输入规格', trigger: 'blur' }],
        amoumt: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        new: [{ required: true, message: '请选择新旧', trigger: 'change' }],
        state: [{ required: true, message: '请选择展览类型', trigger: 'change' }],
        states: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      // 现有库存 单位 成本
      amoumt: 0,
      unit: '',
      nowcost: 0,
      // 规格列表
      modelList: [],
      // 仓库列表
      houseList: [],
      // 所有规格
      modelAll: [],
      // 展厅数据
      showList: [],
      //客户名称
      customerList: [],
    }
  },
  mounted() {
    const myDate = new Date()
    const year = myDate.getFullYear() // 获取当前年份
    const month = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月所以要加1);
    const day = myDate.getDate() // 获取当前日（1-31）
    // 日期格式：2019/07/29 - 2019/07/29
    this.saveForm.date = `${year}-${month}-${day}`
    this.role = localStorage.getItem('role')
    this.getCustomerList()
    this.getHouse()
    this.getShowData()
  },
  watch: {
    'saveForm.customer': {
      handler: function(val, oldval) {
        if (val == '') {
          this.saveForm.address = ''
          this.saveForm.cname = ''
          this.saveForm.phone = ''
        }
        var cusData = {}
        cusData = this.customerList.filter(element => {
          return val == element.company
        })
        if (typeof cusData !== 'undefined') {
          cusData = cusData[0]
          this.saveForm.address = cusData.address
          this.saveForm.cname = cusData.name
          this.saveForm.phone = cusData.phone

        }
      }
    }
  },
  methods: {
    // 获取客户数据
    async getCustomerList() {
      const { data: result } = await this.$http.post('/api-customer')
      this.customerList = result.data
    },
    // 获取分类下产品
    changeProduct() {
      this.houseList = []
      this.modelList = []
      this.saveForm.productn = ''
      this.saveForm.model = ''
      this.saveForm.amoumt = 0
      this.amoumt = 0
      this.unit = ''
      this.nowcost = 0
      this.getHouse()
    },
    // 修改新旧
    changeNew() {
      this.amoumt = this.saveForm.new ? this.modelList[this.saveForm.model].amoumt : this.modelList[this.saveForm.model].oldamoumt
      this.saveForm.amoumt = this.amoumt ? 1 : 0
    },
    // 获取仓库列表
    async getHouse() {
      let params = {
        page: 1,
        pageSize: 100000,
        product: this.saveForm.product
      }
      const { data: result } = await this.$http.get('/house-product', { params: params })
      if (result.status !== 200) return this.$message.error(result.msg)
      this.houseList = result.data.houseList
      this.modelAll = result.data.modelList
    },
    // 获取产品规格
    changeName() {
      this.modelList = []
      this.saveForm.model = ''
      this.saveForm.amoumt = 0
      this.amoumt = 0
      this.unit = ''
      this.nowcost = 0
      // 获取产品规格
      this.modelList = this.modelAll[this.saveForm.productn]
    },
    // 修改规格
    changeModel() {
      this.saveForm.amoumt = 0
      this.saveForm.price = 0
      this.nowcost = 0
      this.unit = ''
      this.amoumt = 0
      if (this.modelList[this.saveForm.model]) {
        this.nowcost = this.modelList[this.saveForm.model].nowcost
        this.unit = this.modelList[this.saveForm.model].unit
        this.saveForm.price = this.modelList[this.saveForm.model].price
      }
      this.amoumt = this.saveForm.new ? this.modelList[this.saveForm.model].amoumt : this.modelList[this.saveForm.model].oldamoumt
      this.saveForm.amoumt = this.amoumt ? 1 : 0
    },
    // 返回
    back() {
      localStorage.removeItem('SaveShow')
      this.$router.push({ 'name': 'show-list' })
    },
    // 获取订单数据
    getShowData() {
      if (this.$route.params.showList) {
        this.showList = this.$route.params.showList
        localStorage.setItem('SaveShow', JSON.stringify(this.$route.params.showList))
      } else {
        this.showList = JSON.parse(localStorage.getItem('SaveShow'))
      }
      if (this.showList) {
        this.saveForm.date = this.showList.date
        this.saveForm.customer = this.showList.customer
        this.saveForm.address = this.showList.address
        this.saveForm.new = this.showList.new
        this.saveForm.cname = this.showList.cname
        this.saveForm.phone = this.showList.phone
        this.saveForm.installtime = this.showList.installtime
        this.saveForm.itime = this.showList.itime
        this.oid = this.showList.oid
      }
    },
    async submitForm() {
      if (this.saveForm.amoumt < 1) {
        return this.$message.error('数量不能小于1')
      }
      this.$refs.saveForm.validate(async (valid) => {
        if (!valid) return
        // 可以发起新增入库单的网络请求
        this.saveForm.oid = this.oid
        const { data: result } = await this.$http.post('/show', { data: this.saveForm })
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('新增成功！')
        this.$router.push({ path: '/show-list' })
      })
    }
  }
}
</script>
<style scoped>
.dropdownbox{
  z-index: 10001 !important;
}
</style>
